<template>
  <el-card>
    <div id="map" ref="BMapRef" @mousewheel.prevent="handle"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'HomeMap',
}
</script>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
const BMapRef = ref()
let handle: () => void
window.initialize = () => {
  const map = new BMapGL.Map('map') // 初始化地图
  const point = new BMapGL.Point(121.491, 31.233) // 初始化中心点
  map.centerAndZoom(point, 10) // 设置地图中心点和缩放比例
  // map.setMapType(BMAP_EARTH_MAP) // 设置地图类型
  var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
  map.addControl(scaleCtrl)
  var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
  map.addControl(zoomCtrl)
  var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
  map.addControl(cityCtrl)
  map.addControl(new BMapGL.MapTypeControl())
  map.enableScrollWheelZoom() // 启动滚轮缩放

  /*  var geolocation = new BMapGL.Geolocation()
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      var mk = new BMapGL.Marker(r.point)
      map.addOverlay(mk)
      map.panTo(r.point)
      alert('您的位置：' + r.point.lng + ',' + r.point.lat)
    } else {
      alert('failed' + this.getStatus())
    }
  }) */
  /* function myFun(result) {
    var cityName = result.name
    map.setCenter(cityName)
    alert('当前定位城市:' + cityName)
  }
  var myCity = new BMapGL.LocalCity()
  myCity.get(myFun) */
  var geolocation = new BMapGL.Geolocation()
  // 开启SDK辅助定位
  /*  geolocation.enableSDKLocation()
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      var mk = new BMap.Marker(r.point)
      map.addOverlay(mk)
      map.panTo(r.point)
      alert('您的位置：' + r.point.lng + ',' + r.point.lat)
    } else {
      alert('failed' + this.getStatus())
    }
  }) */

  var opts = {
    width: 250, // 信息窗口宽度
    height: 100, // 信息窗口高度
    title: 'Hello', // 信息窗口标题
  }
  var infoWindow = new BMapGL.InfoWindow('World', opts) // 创建信息窗口对象
  map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
}

onMounted(() => {
  BMapRef.value.addEventListener

  const script = document.createElement('script')
  script.src =
    'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=baUzqWXiTGndlUFAM2pn9bg2IOUokmSY&callback=initialize'
  document.body.appendChild(script)
})
</script>

<style scoped>
#map {
  height: 600px;
  width: 100%;
}
</style>
